<template>
    <view class="page">
        <view class="top-head-bg">
            <image src="@/static/images/home-bg.png" mode=""></image>
            <view class="swiper-box">
                <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
                    <swiper-item class="swiper-item" v-for="(item,index) in bannerArr" :key="index">
                        <image :src="item.image" mode=""></image>
                    </swiper-item>
                </swiper>
            </view>
        </view>

        <view class="px-3">
            <view class="nav-list flex flex-wrap justify-between mb-3">
                <view class="item-nav flex flex-column justify-center text-center align-center"
                      v-for="(item,index) in navArr" :key="index" @click="navBtn(item)">
                    <image class="mb-2" :src="item.icon" mode=""></image>
                    <view>{{ item.name }}</view>
                </view>
            </view>

            <view class="rmzx mb-3">
                <image class="rmzx-img" src="../../static/images/rmzx.png" mode=""></image>
            </view>


            <view class="content-list">
                <view class="item-content mb-3" v-for="(item,index) in news" :key="index" @click="readDetail(item.id)">
                    <image :src="item.image"></image>
                    <view class="text-ellipsis">{{ item.name }}</view>
                </view>
            </view>
        </view>
        <u-popup :show="show" mode="center" :round="20" @close="close" @open="open">
            <view class="popup">
                <image src="https://d-youpin.bigchun.com/assets/image/img.png"></image>
                <view class="tip-1">请跳转到</view>
                <view class="tip-2">{{ typejump == '安天下' ? '安天下 ' : '国动智充+ 小程序' }} 中充电</view>
                <view class="toCharge" @click="toCharge()">马上使用</view>
            </view>
        </u-popup>
    </view>
</template>

<script>
import {
    postLogin,
    getUserInfo
} from '../../api/user.js';
import {
    wechatConfig
} from '../../api/public.js';
import {
    postHome,
    postUpFileUrl
} from '../../api/home.js'

export default {
    data() {
        return {
            typejump : '',
            show     : false,
            bannerArr: [], // 轮播图
            news     : [], // 新闻资讯
            key      : "", // 加密key
            navArr   : [{
                icon: "../../static/images/sys-nav.png",
                name: "扫一扫"
            },
                {
                    icon: "../../static/images/xiaoxi-nav.png",
                    name: "消息",
                    link: "/pages/home/inform"
                },
                {
                    icon: "../../static/images/zfzx-nav.png",
                    name: "政府资讯",
                    link: "/pages/home/consult"
                },
                {
                    icon: "../../static/images/cdz-nav.png",
                    name: "充电桩",
                    link: "/pages/home/powermap"
                },
                {
                    icon: "../../static/images/clgl-nav.png",
                    name: "车辆管理",
                    link: "/pages/home/vehicle"
                },
                {
                    icon: "../../static/images/ly-nav.png",
                    name: "悠品鹏城",
                    link: ""
                },
                {
                    icon   : "../../static/images/kd.png",
                    name   : "宽带",
                    link   : "/pages/user/broadband",
                    isLogin: true
                },
                {
                    icon   : "../../static/images/yh.png",
                    name   : "上传隐患",
                    link   : "/pages/home/danger",
                    isLogin: true
                },
                {
                    icon   : "../../static/images/sp.png",
                    name   : "附近商铺",
                    link   : "/pages/home/shops",
                    isLogin: true

                },
            ]

        }
    },
    onLoad() {
        //用户没登陆的时候
        // if(!uni.getStorageSync('userInfo')) this.isWxLogin();
        // else this.getInfo();
        // var url =  location.href;
        // if (url.indexOf('phone') != -1) {
        // 	this.phone = url.split('phone=')[1];
        // 	this.isWxLogin()
        // }
        this.init();
        // #ifdef H5
        // this.getConfig();
        // #endif
    },
    onReady() {
        uni.preloadPage({
            url: "/pages/home/powermap",
        })
    },
    methods: {
        open() {
            this.show = true
        },
        close() {
            this.show = false
        },
        async init() {
            var res = await postHome()
            if (res.data.code == 1) {
                this.bannerArr = res.data.data.banner;
                this.news      = res.data.data.news;
                this.key       = res.data.data.key;
            }

        },
        async toCharge() {
            if (this.typejump == '国动智充') {
                uni.navigateToMiniProgram({
                    appId: 'wx47f5db820735a53b',
                    // path: 'page/Applet/Chargingpile/AppletJumpYoupin?device_id=401271092700556&unique_id=18539426815&secret_key=84769044d40aeb5b8ea79ad633fcb394',
                    path: "/pages/index/index.html?q=https%3A%2F%2Fguodongiot.com%3F" + this.AppletJumpYoupin.replace("device_id", "deviceID")
                    , success(res) {
                        this.show = false;
                    },
                    fail(res) {
                        console.log("fail", res);
                    }
                })
            }
            if (this.typejump == '安天下') {
                uni.navigateTo({
                    url: "/pages/home/webview?title=安天下&src=" + this.AppletJumpYoupin,
                })
            }
        },
        navBtn(item) {
            if (item.name == "悠品鹏城") {
                uni.navigateTo({
                    url: "/pages/home/webView?title=悠品鹏城src=" + encodeURIComponent(
                        "https://youpin.youpinpc.com/app/index.php?i=2&c=entry&do=myhome&m=we7_flow"),
                })
                return
            }
            var self = this;
            if (item.name == '扫一扫') {
                if (!uni.getStorageSync('userInfo')) {
                    uni.showToast({
                        title: "请登录",
                        icon : "none"
                    })
                    setTimeout(() => {
                        uni.navigateTo({
                            url: "/pages/user/login",
                        })
                    }, 1200)
                    return
                }

                if (uni.getStorageSync('userInfo') && uni.getStorageSync('userInfo').mobile == '') {
                    uni.showToast({
                        title: "请绑定手机号",
                        icon : "none"
                    })
                    setTimeout(() => {
                        uni.navigateTo({
                            url: '/pages/user/login?type=' + uni.getStorageSync('uid')
                        })
                    }, 1200)
                    return
                }

                uni.scanCode({
                    scanType: ["qrcode", "barCode"],
                    success : async function (res) {
                        console.log("scanCode", res.result);
                        var url  = res.result
                        let user = uni.getStorageSync('userInfo'),
                            mobile;
                        if (user.mobile) mobile = user.mobile;
                        let resule = await postUpFileUrl({
                            url,
                            mobile
                        })
                        console.log("00000", resule.data.data);
                        if (resule.data.code == 1) {
                            if (resule.data.data.indexOf('guodong') != -1) {
                                self.AppletJumpYoupin = encodeURIComponent(resule.data.data.split('?')[1])
                                console.log(encodeURIComponent(self.AppletJumpYoupin));
                                self.typejump = '国动智充'
                                self.show     = true
                            } else if (resule.data.data.indexOf('atx') != -1) {
                                let canshu = resule.data.data.split('?')[1]
                                let openid            = uni.getStorageSync('userInfo').openid
                                let mobile            = uni.getStorageSync('userInfo').mobile
                                let guanzhu           = true
                                let link_url          = 'https' + url.split('/customer/')[0].split('ttp')[1] + '/customer/' + url.split('/customer/')[1] + '&openID=' + openid + '&mobile=' + mobile+'&'+canshu
                                self.typejump         = '安天下'
                                console.log("===canshu",link_url)
                                self.AppletJumpYoupin = encodeURIComponent(link_url)
                                self.show             = true
                            } else {
                                uni.showToast({
                                    title: "暂不支持",
                                    icon : 'none'
                                })
                            }


                        } else {
                            uni.showToast({
                                title: resule.data.msg,
                                icon : 'none'
                            })
                        }
                    }
                })
            } else if (item.name == '充电桩') {
                uni.navigateTo({
                    url: item.link
                })
            } else if (item.isLogin) {
                if (!uni.getStorageSync('userInfo')) {
                    uni.showToast({
                        title: "请登录",
                        icon : "none"
                    })
                    setTimeout(() => {
                        uni.navigateTo({
                            url: "/pages/user/login",
                        })
                    }, 1200)
                    return
                }
                uni.navigateTo({
                    url: item.link
                })
            } else {
                if (item.link) uni.navigateTo({
                    url: item.link
                })
            }

        },
        getConfig() {
            var data = {
                url: encodeURIComponent(location.href.split('#')[0])
            }
            wechatConfig(data).then(res => {
                this.initJsdk(res.data.data)
            })
        },
        initJsdk(config) {
            this.$wx.config({
                debug    : false, // 开启调试模式
                appId    : config.appId, // 必填，公众号的唯一标识
                timestamp: config.timestamp, // 必填，生成签名的时间戳
                nonceStr : config.nonceStr, // 必填，生成签名的随机串
                signature: config.signature, // 必填，签名，见附录1
                jsApiList: config.jsApiList // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            })
            this.$wx.ready(function () {
                this.$wx.checkJsApi({
                    jsApiList: ['scanQRCode', 'getLocation'],
                    success  : function (res) {

                    }
                })
            })
            this.$wx.error(function (res) {
                // console.log(res,'this.$wx.error')
            });

        },
        isWxLogin() {
            var url = location.href;

            var code = '';
            if (url.indexOf('code') != -1) {
                code = url.split('?')[1].split('&')[0].split('code=')[1];
            }
            if (code) {
                let data         = {};
                data.code        = code;
                data.phone       = this.phone;
                data.is_landlord = uni.getStorageSync('isType') || 0
                postLogin(data).then(res => {
                    if (res.data.code == 1) {
                        uni.showToast({
                            title: res.data.msg,
                            icon : 'success'
                        })
                        if (uni.getStorageSync('isType')) uni.removeStorageSync('isType')
                        uni.setStorageSync('token', res.data.data.token);
                        uni.setStorageSync('uid', res.data.data.id);
                        uni.setStorageSync('userInfo', res.data.data);

                    } else if (res.data.code == 101) {
                        var uid = res.data.data.id;
                        uni.setStorageSync('token', res.data.data.token);
                        uni.setStorageSync('uid', res.data.data.id);
                        uni.setStorageSync('userInfo', res.data.data);
                        uni.showModal({
                            title      : '提示',
                            content    : '请绑定手机号',
                            confirmText: "去绑定",
                            success    : function (res) {
                                if (res.confirm) {
                                    uni.navigateTo({
                                        url: '/pages/user/login?type=' + uid
                                    })
                                    return
                                } else if (res.cancel) {

                                }
                            }
                        });

                    }
                })
            }
        },
        // 文章详情
        readDetail(id) {
            if (!uni.getStorageSync('userInfo')) {
                uni.navigateTo({
                    url: "/pages/user/login",
                    success() {
                        uni.showToast({
                            title: "请登录",
                            icon : "none"
                        })
                    }
                })
                return
            } else {
                uni.navigateTo({
                    url: "/pages/home/newDetail?id=" + id
                })
            }

        },

        getInfo() {
            var data = {
                uid: uni.getStorageSync('uid')
            }
            getUserInfo(data).then(res => {
                if (res.data.code == 1) {
                    uni.setStorageSync('userInfo', res.data.data);
                    uni.setStorageSync('token', res.data.data.token);
                } else {
                    wx.clearStorage()
                    var url  = location.href;
                    var code = '';
                    if (url.indexOf('code') != -1) {
                        code = url.split('?')[1].split('&')[0].split('code=')[1];
                    }
                    if (code) this.isWxLogin();
                }
            })
        },
        //发送给朋友
        onShareAppMessage(res) {
            // // 此处的distSource为分享者的部分信息，需要传递给其他人
            // let distSource = uni.getStorageSync('distSource');
            // if (distSource) {
            // 	return {
            // 		title: '欢迎使用xxx商城',
            // 		type: 0,
            // 		path: '/pages/index/index?id=' + distSource,
            // 		summary: "",
            // 		imageUrl: "https://58d.oss-cn-hangzhou.aliyuncs.com/goods/ttg_1596073788000.png"
            // 	}
            // }
        },
        //分享到朋友圈
        onShareTimeline(res) {
            // let distSource = uni.getStorageSync('distSource');
            // if (distSource) {
            // 	return {
            // 		title: '欢迎使用xxx商城',
            // 		type: 0,
            // 		query: 'id=' + distSource,
            // 		summary: "",
            // 		imageUrl: "https://58d.oss-cn-hangzhou.aliyuncs.com/goods/ttg_1596073788000.png"
            // 	}
            // }
        },
    }
}
</script>

<style>
page {
    background: rgb(245, 245, 245);
}

.popup {
    padding: 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

}

.tip-1 {
    font-size: 15px;
    color: #000;
    padding: 13px 0 8px 0;
}

.tip-2:before {
    content: '';
    display: block;
    position: absolute;
    left: -12px;
    top: 7px;
    width: 6px;
    height: 6px;
    background: #FF002B;
    border-radius: 50%;
}

.tip-2 {
    font-size: 14px;
    color: #FF002B;
    padding-bottom: 16px;
    position: relative;
    line-height: 20px;
}

.toCharge {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    background-image: linear-gradient(#FF002B, #FF6565);
    width: 223px;
    height: 46px;
    border-radius: 23px;
    border: none;
    color: #fff;
}

.top-head-bg {
    width: 100%;
    height: 200rpx;
    position: relative;
    margin-bottom: 200rpx;
}

.top-head-bg image {
    width: 100%;
    height: 100%;
}

.swiper-box {
    width: 670rpx;
    height: 260rpx;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 57rpx;
}

.swiper-item,
.swiper-item image {
    width: 100%;
    height: 100%;
}

.nav-list {
    background-color: white;
    padding: 20rpx 20rpx;
    border-radius: 10rpx;
    font-size: 26rpx;
    color: #333;
}

.item-nav {
    width: 33%;
    justify-content: center;
    align-items: center;
    margin-bottom: 20rpx;
}

.nav-list .item-nav:nth-child(3n+3) {
    margin-right: 0 !important;
}

.item-nav image {
    width: 80rpx;
    height: 80rpx;
}

.rmzx {
    width: 100%;
    padding: 15rpx 32rpx;
    background-color: #FFFFFF;
    box-sizing: border-box;
}

.rmzx-img {
    width: 105rpx;
    height: 45rpx;
}

.item-content {
    width: 100%;
    padding: 20rpx;
    box-sizing: border-box;
    font-size: 26rpx;
    background: #FFFFFF;
    border-radius: 10rpx;
}

.item-content image {
    width: 100%;
    height: 295rpx;
    margin-bottom: 25rpx;
    border-radius: 10rpx;
}
</style>
